<div class="columns">
  <div class="column">
    <PageHeader as |p|>
      <p.top>
        {{key-value-header
          baseKey=model
          path="vault.cluster.secrets.backend.list"
          mode=mode
          root=backendCrumb
          showCurrent=true
        }}
      </p.top>
      <p.levelLeft>
        <h1 class="title is-3">
          {{#secret-link
            class="is-inline has-text-info"
            secret=model.id
            mode="show"
            replace=true
            queryParams=(query-params tab='actions')
            data-test-transit-link="actions"
            }}
            <Icon @glyph="arrow-left" />
          {{/secret-link}}
          Key Actions
        </h1>
      </p.levelLeft>
    </PageHeader>

    <div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
      <nav class="tabs">
        <ul>
          {{#each model.supportedActions as |supportedAction|}}
            <li class="{{if (eq supportedAction.name selectedAction) 'is-active'}}">
              {{#secret-link
                  mode="actions"
                  secret=model.id
                  queryParams=(query-params action=supportedAction.name)
                  data-test-transit-action-link=supportedAction.name
                }}
                {{#if (eq supportedAction.name 'export')}}
                  Export Key
                {{else if (eq supportedAction.name 'hmac')}}
                  HMAC
                {{else}}
                  {{humanize supportedAction.name}}
                {{/if}}
              {{/secret-link}}
            </li>
          {{/each}}
        </ul>
      </nav>
    </div>

    <TransitKeyActions
      @selectedAction={{selectedAction}}
      @backend={{backend}}
      @key={{model}}
      @capabilities={{capabilities}}
      @onRefresh={{action "refresh"}}
    />
  </div>
</div>
